<template>
 <div class="search">
     <span class="shuru" > 输入搜索</span>
     <el-input v-model="search" placeholder="输入用户名昵称或手机号..."></el-input>
        <span class="demonstration">下单时间</span>
     <div class="block">
    
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  <span class="demonst"></span>
  <div class="block">
    
    <el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
   <el-button type="primary" @click="searchFunBtn">查询</el-button>
  <el-button @click="restFunBtn">重置</el-button>
 </div>
   
 
</template>

<script>

export default {
  data() {
    return {
      input: '',
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
        search:''
      }
    
    
  },
  methods:{
    searchFunBtn(){
      this.$emit('searhParent',this.search)
    },
    restFunBtn(){
      this.search=""
      this.value1=""
      this.value2=""
      this.$parent.fu()
      
    }
  }
}
</script>

<style lang="less" scoped>
.search{
    background-color: #fff;
     margin-bottom:  20px ;
     height: 64px;
     line-height: 64px;
 span{
     float: left;
     font-weight: bold;
 }
 .shuru{
     
    margin-left: 30px;
   
}

}
.demonstration{
margin-left: 40px;
}
/deep/.el-input{
    width: 220px;
    margin-left: 20px;
   float: left;
   
}
.block{
    float: left;
}   
/deep/.demonst{
    width: 25px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
    background-color: #DCDFE6;
    margin: 30px 0 0 20px;
}
.el-button{
margin-left: 30px;
font-size: 14px;
font-weight: bold;
padding: 9px 25px;
}
</style>